<template>
 <div class="box">
  <div class="font-600">
    學生消費排行報表
  </div>
  <div style="min-width: 1200px;" v-cloak class="mt-[30px]">
    <el-form ref="ruleFormRef" label-width="80px" :model="fromData">
      <el-form-item label="分校" prop="school_id">
        <el-select v-model="fromData.school_id"  placeholder="請選擇" @focus="getSchool">
          <el-option v-for="item in schoolData" :label="item.name" :key="item.id" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="狀態" prop="status">
        <el-select v-model="fromData.status" placeholder="請選擇">
          <el-option label="有效" value="1"></el-option>
          <el-option label="無效" value="-1"></el-option>
        </el-select>
      </el-form-item>

      <ExcelFooter @rebuild="rebuild" @showPage="showPage" />
    </el-form>
    <!-- <a v-show="false" ref="exportExcel" href=""></a> -->
  </div>
 </div>
</template>

<script setup>
import {ref,reactive} from 'vue'
import {SchoolList,producttype} from '@/http/index.js'
import { setFormConfig } from "../sale/index.js"
import { useRouter} from "vue-router";


const ruleFormRef = ref('')
const fromData = reactive({
        school_id: '',
        status: '',
        top:'1'
      })
    // 學校列表
const schoolData = ref([])
const getSchool = async()=>{
    const data = await SchoolList()
    if (data.code == 200) {
        schoolData.value = data.data.data
    }
}

const router = useRouter();
const showPage = ()=>{
let obj = Object.assign({},fromData)
obj.school_id = obj.school_id.toString()
          let {href} = router.resolve({
          path: '/customer_report_print',
          query: {
           index:'consumetopReport',
           url:'analyse/consume',
           data:JSON.stringify(obj),
          }
        })
    window.open(href,'_blank')

}
const datecontrols = ref('')
const rebuild = ()=>{
  ruleFormRef.value.resetFields()
}

</script>

<style scoped lang='less'>
.box {
  padding: 16px 33px;
}
</style>